From f7ff6dbb66a6200ceb4222c6a1ebe152647e0258 Mon Sep 17 00:00:00 2001 From: Alexander Larsson Date: Wed, 22 Nov 2017 10:32:47 +0100 Subject: [PATCH] broadway: Add RoundedClip node --- gdk/broadway/broadway-protocol.h | 13 +++--- gdk/broadway/broadway.js | 71 +++++++++++++++++++------------- gdk/broadway/broadwayd.c | 4 ++ gsk/gskbroadwayrenderer.c | 14 +++++-- 4 files changed, 64 insertions(+), 38 deletions(-) diff --git a/gdk/broadway/broadway-protocol.h b/gdk/broadway/broadway-protocol.h index baead88ce4..bc772d98ea 100644 --- a/gdk/broadway/broadway-protocol.h +++ b/gdk/broadway/broadway-protocol.h @@ -9,12 +9,13 @@ typedef struct { } BroadwayRect; typedef enum { /* Sync changes with broadway.js */ - BROADWAY_NODE_TEXTURE, - BROADWAY_NODE_CONTAINER, - BROADWAY_NODE_COLOR, - BROADWAY_NODE_BORDER, - BROADWAY_NODE_OUTSET_SHADOW, - BROADWAY_NODE_INSET_SHADOW, + BROADWAY_NODE_TEXTURE = 0, + BROADWAY_NODE_CONTAINER = 1, + BROADWAY_NODE_COLOR = 2, + BROADWAY_NODE_BORDER = 3, + BROADWAY_NODE_OUTSET_SHADOW = 4, + BROADWAY_NODE_INSET_SHADOW = 5, + BROADWAY_NODE_ROUNDED_CLIP = 6, } BroadwayNodeType; typedef enum { diff --git a/gdk/broadway/broadway.js b/gdk/broadway/broadway.js index 926f56bda5..68f7b8afbc 100644 --- a/gdk/broadway/broadway.js +++ b/gdk/broadway/broadway.js @@ -362,6 +362,15 @@ SwapNodes.prototype.decode_rect = function() { return r; } +SwapNodes.prototype.decode_irect = function() { + var r = new Object(); + r.x = this.decode_int32 (); + r.y = this.decode_int32 (); + r.width = this.decode_int32 (); + r.height = this.decode_int32 (); + return r; +} + SwapNodes.prototype.decode_rounded_rect = function() { var r = new Object(); r.bounds = this.decode_rect(); @@ -384,35 +393,35 @@ function px(x) { return x + "px"; } -function set_rrect_style (div, rrect) { - div.style["left"] = px(rrect.bounds.x); - div.style["top"] = px(rrect.bounds.y); - div.style["width"] = px(rrect.bounds.width); - div.style["height"] = px(rrect.bounds.height); +function set_rect_style (div, rect, offset_x, offset_y) { + div.style["left"] = px(rect.x - offset_x); + div.style["top"] = px(rect.y - offset_y); + div.style["width"] = px(rect.width); + div.style["height"] = px(rect.height); +} + +function set_rrect_style (div, rrect, offset_x, offset_y) { + set_rect_style(div, rrect.bounds, offset_x, offset_y); div.style["border-top-left-radius"] = args(px(rrect.sizes[0].width), px(rrect.sizes[0].height)); div.style["border-top-right-radius"] = args(px(rrect.sizes[1].width), px(rrect.sizes[1].height)); div.style["border-bottom-right-radius"] = args(px(rrect.sizes[2].width), px(rrect.sizes[2].height)); div.style["border-bottom-left-radius"] = args(px(rrect.sizes[3].width), px(rrect.sizes[3].height)); } -SwapNodes.prototype.handle_node = function(parent) +SwapNodes.prototype.handle_node = function(parent, offset_x, offset_y) { var type = this.decode_uint32(); switch (type) { case 0: // TEXTURE { - var x = this.decode_uint32(); - var y = this.decode_uint32(); - var width = this.decode_uint32(); - var height = this.decode_uint32(); + var rect = this.decode_irect(); var texture_id = this.decode_uint32(); var image = new Image(); - image.width = width; - image.height = height; + image.width = rect.width; + image.height = rect.height; image.style["position"] = "absolute"; - image.style["left"] = px(x); - image.style["top"] = px(y); + set_rect_style(image, rect, offset_x, offset_y); var texture_url = textures[texture_id]; this.add_image(image); image.src = texture_url; @@ -424,27 +433,21 @@ SwapNodes.prototype.handle_node = function(parent) { var len = this.decode_uint32(); for (var i = 0; i < len; i++) { - this.handle_node(parent); + this.handle_node(parent, offset_x, offset_y); } } break; case 2: // COLOR { - var x = this.decode_uint32(); - var y = this.decode_uint32(); - var width = this.decode_uint32(); - var height = this.decode_uint32(); + var rect = this.decode_rect(); var c = this.decode_color (); var div = document.createElement('div'); div.style["position"] = "absolute"; - div.style["left"] = x + "px"; - div.style["top"] = y + "px"; - div.style["width"] = width + "px"; - div.style["height"] = height + "px"; + set_rect_style(div, rect, offset_x, offset_y); div.style["background-color"] = c; parent.appendChild(div); -} + } break; case 3: // BORDER @@ -461,7 +464,7 @@ SwapNodes.prototype.handle_node = function(parent) div.style["position"] = "absolute"; rrect.bounds.width -= border_widths[1] + border_widths[3]; rrect.bounds.height -= border_widths[0] + border_widths[2]; - set_rrect_style(div, rrect, border_widths); + set_rrect_style(div, rrect, offset_x, offset_y); div.style["border-style"] = "solid"; div.style["border-top-color"] = border_colors[0]; div.style["border-top-width"] = px(border_widths[0]); @@ -486,7 +489,7 @@ SwapNodes.prototype.handle_node = function(parent) var div = document.createElement('div'); div.style["position"] = "absolute"; - set_rrect_style(div, rrect, null); + set_rrect_style(div, rrect, offset_x, offset_y); div.style["box-shadow"] = args(px(dx), px(dy), px(blur), px(spread), color); parent.appendChild(div); } @@ -503,12 +506,24 @@ SwapNodes.prototype.handle_node = function(parent) var div = document.createElement('div'); div.style["position"] = "absolute"; - set_rrect_style(div, rrect, null); + set_rrect_style(div, rrect, offset_x, offset_y); div.style["box-shadow"] = args("inset", px(dx), px(dy), px(blur), px(spread), color); parent.appendChild(div); } break; + case 6: // ROUNDED_CLIP + { + var rrect = this.decode_rounded_rect(); + var div = document.createElement('div'); + div.style["position"] = "absolute"; + set_rrect_style(div, rrect, offset_x, offset_y); + div.style["overflow"] = "hidden"; + parent.appendChild(div); + this.handle_node(div, rrect.bounds.x, rrect.bounds.y); + } + break; + default: alert("Unexpected node type " + type); } @@ -524,7 +539,7 @@ function cmdWindowSetNodes(id, node_data) /* We use a secondary div so that we can remove all previous children in one go */ var swap = new SwapNodes (node_data, div); - swap.handle_node(swap.div2); + swap.handle_node(swap.div2, 0, 0); if (swap.data_pos != node_data.length) alert ("Did not consume entire array (len " + node_data.length + " end " + end + ")"); swap.did_one (); diff --git a/gdk/broadway/broadwayd.c b/gdk/broadway/broadwayd.c index c54f86b4bf..b3ebd4b02d 100644 --- a/gdk/broadway/broadwayd.c +++ b/gdk/broadway/broadwayd.c @@ -253,6 +253,10 @@ rewrite_node_textures (BroadwayClient *client, for (i = 0; i < n_children; i++) pos = rewrite_node_textures (client, len, data, pos); break; + case BROADWAY_NODE_ROUNDED_CLIP: + pos += NODE_SIZE_RRECT; + pos = rewrite_node_textures (client, len, data, pos); + break; default: g_assert_not_reached (); } diff --git a/gsk/gskbroadwayrenderer.c b/gsk/gskbroadwayrenderer.c index 7a19185c32..0720369078 100644 --- a/gsk/gskbroadwayrenderer.c +++ b/gsk/gskbroadwayrenderer.c @@ -178,10 +178,7 @@ gsk_broadway_renderer_add_node (GskRenderer *self, case GSK_COLOR_NODE: { add_uint32 (nodes, BROADWAY_NODE_COLOR); - add_uint32 (nodes, x); - add_uint32 (nodes, y); - add_uint32 (nodes, width); - add_uint32 (nodes, height); + add_rect (nodes, &node->bounds); add_rgba (nodes, gsk_color_node_peek_color (node)); } return; @@ -222,6 +219,15 @@ gsk_broadway_renderer_add_node (GskRenderer *self, } return; + case GSK_ROUNDED_CLIP_NODE: + { + add_uint32 (nodes, BROADWAY_NODE_ROUNDED_CLIP); + add_rounded_rect (nodes, gsk_rounded_clip_node_peek_clip (node)); + gsk_broadway_renderer_add_node (self, nodes, node_textures, + gsk_rounded_clip_node_get_child (node)); + } + return; + default: { cairo_surface_t *surface; -- 2.30.2